import React from "react";

interface ButtonProps {
	onClick : () => void;
	children : React.ReactNode;
}
const Button : React.FC<ButtonProps> = ({onClick , children} : ButtonProps) => {
	return (
		<button onClick={e => {
			e.stopPropagation();// 阻止事件向上冒泡
			e.preventDefault();// 阻止默认事件
			onClick();
		}}>
			{children}
		</button>
	);
}

const ToolBarCustom = () => {

	// 事件冒泡
	// onClickCapture 会在 onClickCapture 事件捕获阶段触发，而 onClick 事件会在冒泡阶段触发。
	//执行顺序 ： onClickCapture(父节点)->onClick(子节点)->onClick(子节点)
	return (
		<div className="Toolbar" onClickCapture={() => alert('Clicked Parent!')} onClick={() => alert('Clicked Child !')}>
			<Button onClick={() => alert('Playing !')}>
				Play Movie !
			</Button>
			<Button onClick={() => alert('Uploading !')}>
				Update Image
			</Button>
		</div>
	);
}

export default ToolBarCustom;